<template>
  <div class="fixed bottom-0 left-0 w-full z-999">
    <nut-tabbar v-model="_activeIndex" @tab-switch="tabSwitch" active-color="#3d8ffd">
      <nut-tabbar-item v-for="(item, index) in List" :tab-title="item.title" :icon="item.icon"> </nut-tabbar-item>
    </nut-tabbar>
  </div>
</template>
<script setup>
import { h, ref, defineProps, watch } from 'vue';
import { useRouter } from 'vue-router';
import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
import { getURLParameters } from '@/utils/common/common.js'
const router = useRouter()
const _activeIndex = ref(1);
const props = defineProps({
  activeIndex: {
    type: Number,
    require: true,
    default: 0
  }
})
_activeIndex.value = props.activeIndex
watch(() => props.activeIndex, (newL) => {
  _activeIndex.value = newL
})


const List = [
  {
    title: '首页',
    icon: h(Home),
    name: 'home'
  },
  {
    title: '我的',
    icon: h(My),
    name: 'my'
  }
];
const tabSwitch = (item, index) => {
  let params = getURLParameters()
  console.log(index);
  if (index === 0) {
    router.push({ path: '/home', query: params })
  } else if (index === 1) {
    router.push({ path: '/myOrder', query: params })
  }
};
</script>
